<template>
  <div class="yoyo-container mx-auto min-h-screen pb-[env(safe-area-inset-bottom)] bg-gray-50">
    <!-- 导航栏 -->
    <navBar :title="$t('orderDetail.title')" :showBack="true"></navBar>

    <div class="px-4 py-4 space-y-4">
      <!-- 商品信息 -->
      <div class="bg-white rounded-lg overflow-hidden">
        <div class="flex items-center px-4 py-2 border-b border-gray-100">
          <div class="w-2 h-4 bg-orange-500 mr-2"></div>
          <span class="text-gray-800 font-medium">{{ $t("orderDetail.productInfo") }}</span>
        </div>
        <div
          v-for="(item, index) in orderDetail.items"
          :key="index"
          class="flex items-center px-4 py-2 border-b border-gray-100"
          :class="index === orderDetail.items.length - 1 ? 'border-b-0' : ''">
          <img :src="item.picUrl" alt="" class="w-12 h-12 rounded-lg" />
          <div class="ml-3 flex-1">
            <div class="flex items-center justify-between">
              <span>{{ item.spuType }} {{ isZh ? item.spuName : item.spuNameEn }}</span>
              <span>{{ isZh ? "¥" : "RM" }} {{ formatToYuan(item.price) }}</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="mr-1">
                {{
                  isZh ? item.dayValue.name + "&nbsp;" + item.packageValue.name : item.dayValue.nameEn + "&nbsp;" + item.packageValue.nameEn
                }}
              </span>
              <span>x{{ item.count }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 订单金额 -->
      <div class="bg-white rounded-lg overflow-hidden">
        <div class="flex items-center px-4 py-2 border-b border-gray-100">
          <div class="w-2 h-4 bg-orange-500 mr-2"></div>
          <span class="text-gray-800 font-medium">{{ $t("orderDetail.orderAmount") }}</span>
        </div>
        <van-cell :title="$t('orderDetail.productAmount')" :value="`${isZh ? '¥' : 'RM'} ${formatToYuan(orderDetail.totalPrice)}`" />
        <van-cell
          :title="$t('orderDetail.yoyoCoinDiscount')"
          :value="`-${isZh ? '¥' : 'RM'} ${formatToYuan(orderDetail.pointPrice)}`"
          value-class="text-[#ff7a00]" />
        <van-cell
          :title="$t('orderDetail.couponDiscount')"
          :value="`-${isZh ? '¥' : 'RM'} ${formatToYuan(orderDetail.couponPrice)}`"
          value-class="text-[#ff7a00]" />
        <van-cell :title="$t('orderDetail.shippingFee')" :value="`${isZh ? '¥' : 'RM'} ${formatToYuan(orderDetail.deliveryPrice)}`" />
        <van-cell
          :title="$t('orderDetail.actualAmount')"
          :value="`${isZh ? '¥' : 'RM'} ${formatToYuan(orderDetail.payPrice)}`"
          title-class="font-medium"
          value-class="text-[#ff7a00] font-medium text-lg" />
      </div>

      <!-- 收货信息 -->
      <div class="bg-white rounded-lg overflow-hidden">
        <div class="flex items-center px-4 py-2 border-b border-gray-100">
          <div class="w-2 h-4 bg-orange-500 mr-2"></div>
          <span class="text-gray-800 font-medium">{{ $t("orderDetail.receiverInfo") }}</span>
        </div>

        <div v-if="showReceiverInfo">
          <van-cell :title="$t('orderDetail.receiverName')" :value="orderDetail.receiverName" />
          <van-cell :title="$t('orderDetail.receiverPhone')" :value="orderDetail.receiverMobile" />
          <van-cell :title="$t('orderDetail.receiverAddress')" :value="orderDetail.receiverDetailAddress" />
        </div>
        <van-cell :title="$t('orderDetail.email')" :value="orderDetail.email" />
      </div>

      <!-- 物流信息 -->
      <div
        class="bg-white rounded-lg overflow-hidden"
        v-if="orderDetail.logisticsName || orderDetail.logisticsNo || orderDetail.deliveryTime">
        <div class="flex items-center px-4 py-2 border-b border-gray-100">
          <div class="w-2 h-4 bg-orange-500 mr-2"></div>
          <span class="text-gray-800 font-medium">{{ $t("orderDetail.logisticsInfo") }}</span>
        </div>

        <van-cell :title="$t('orderDetail.logisticsCompany')" :value="orderDetail.logisticsName" />
        <van-cell :title="$t('orderDetail.trackingNumber')" :value="orderDetail.logisticsNo" />
        <van-cell :title="$t('orderDetail.shippingTime')" :value="orderDetail.deliveryTime" />
      </div>

      <!-- 订单信息 -->
      <div class="bg-white rounded-lg overflow-hidden">
        <div class="flex items-center px-4 py-2 border-b border-gray-100">
          <div class="w-2 h-4 bg-orange-500 mr-2"></div>
          <span class="text-gray-800 font-medium">{{ $t("orderDetail.orderInfo") }}</span>
        </div>

        <van-cell :title="$t('orderDetail.orderNumber')" :value="orderDetail.id" />
        <van-cell :title="$t('orderDetail.serialNumber')" :value="orderDetail.no" />
        <van-cell :title="$t('orderDetail.createTime')" :value="orderDetail.createTime" />
        <van-cell :title="$t('orderDetail.payTime')" :value="orderDetail.payTime" />
      </div>
    </div>
  </div>
</template>

<script>
import { Cell, CellGroup } from "vant"
import { getOrderDetail } from "@/apis/order"
import { mapGetters } from "vuex"
import { formatToYuan } from "@/utils/common"

export default {
  name: "OrderDetail",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  data() {
    return {
      orderDetail: {},
      formatToYuan,
      showReceiverInfo: false,
    }
  },
  computed: {
    ...mapGetters({
      isZh: "lang/isZh",
    }),
  },
  created() {
    // 获取路由参数中的订单ID
    const orderId = this.$route.query.orderId
    if (orderId) {
      this.getOrderDetail(orderId)
    }
  },
  methods: {
    async getOrderDetail(orderId) {
      try {
        // 这里应该调用API获取订单详情
        const res = await getOrderDetail({ id: orderId })
        this.orderDetail = res.data
        const items = this.orderDetail.items
        items.forEach((item) => {
          if (item.type === "sim") {
            this.showReceiverInfo = true
          }
        })
        console.log("获取订单详情:", orderId)
      } catch (error) {
        console.error("获取订单详情失败:", error)
        this.$toast.fail("获取订单详情失败")
      }
    },
  },
}
</script>

<style scoped>
/* 自定义样式 */
/deep/.van-cell {
  background-color: transparent;
  padding: 0.25rem 1rem;
}
/deep/.van-cell::after {
  border-bottom: none;
}
</style>
